<template>
    <div class="archives-page">
        <div class="top-box">
            <div class="man-box">
                <div class="head-box">
                    <img src="@/static/image/head.jpeg" alt="" class="head">
                    <div class="right-box">
                        <p class="text">周星星</p>
                        <p class="bu">销售部</p>
                        <p class="jia"><span style="font-size:1.3rem;color:#02c0b9;">2020-12-05</span>  加入学习平台</p>
                        <p class="login"> 已登录 <span style="font-size:1.3rem;color:#02c0b9;">360</span> 次</p>
                        <p class="number">累积学习 <span style="font-size:1.3rem;color:#02c0b9;">108</span> 小时</p>
                    </div>

                    <div class="clear"></div>
                </div>
                <p class="p-text" v-for="(item,index) in 3">您的课程学习时间超过 <span style="font-size:1.5rem;color:#31c163;">85%</span> 的同学</p>
            </div>
            <div class="data-box">
                <div class="top">
                    <div class="grade-box">
                        <span class="span-d">当前学习等级</span>
                        <span class="deng">初级工程师</span>
                    </div>
                    <div class="grade-box">
                        <span class="span-d">下个等级</span>
                        <span class="deng">中级工程师</span>
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="get-box">
                    <span class="get-title">获得证书</span>
                    <p class="get-content">高级证书,特技资格证,初级证书,中级证书</p>
                </div>
                <div class="get-box">
                    <span class="get-title">获得证书</span>
                    <p class="get-content">高级证书,特技资格证,初级证书,中级证书</p>
                </div>
            </div>
            <div class="clear"></div>
        </div>

        <div class="bottom-box">
            <div class="item">
                <img src="@/static/image/svg1.svg" alt="">
                <span class="name" >课程</span>
                <p class="item-p" v-for="(item,index) in 8"><span style="color:#02c0b9;">80门</span> 
                学习总课程数量学习总课程数量</p>
            </div>

            <div class="item">
                <img src="@/static/image/svg2.svg" alt="" style="widt:8rem;height:5rem;margin-top:0.5rem">
                <span class="name" style="margin-top:0.5rem;">考试</span>
                <p class="item-p" v-for="(item,index) in 8"><span style="color:#31c163;">80门</span> 
                学习总课程数量学习总课程数量</p>
            </div>

            <div class="item">
                <img src="@/static/image/svg3.svg" alt="">
                <span class="name" >技能</span>
                <p class="item-p" v-for="(item,index) in 8"><span style="color:#ee5b0f">80门</span> 
                学习总课程数量学习总课程数量</p>
            </div>
        </div>
    </div>
</template>

<script>
import Pagination from '@/components/pagination.vue'
import Cookies from 'js-cookie'
import nodata from '@/components/nodata.vue'
import $ from "jquery"
export default {

    components: {
        'ui-pagination':Pagination,
        nodata
    },
    data(){
        return{
            
        }
    },
    created(){
        
        
    },
    mounted(){
        
       
    },
    methods:{
        handleClick(tab, event) {
            console.log(tab, event);
        },
        goPage(){

        },
        goContent(item,url){
            this.$router.push(url);
        },
        pageChange(index){
            
        }
    }
}
</script>

<style lang="less">
    .archives-page{
        width:100%;
        height:100%;
        box-sizing:border-box;
        padding:25px;
        overflow:hidden;
        overflow-y:auto;
        .bottom-box{
            width:100%;
            margin-top:2rem;
            .item{
                width:calc(33.3% - 1rem);
                box-sizing:border-box;
                float:left;
                padding:2rem 4rem;
                border:1px solid #eaeaea;
                margin-right:1.5rem;
                img{
                    width:10rem;
                    height:6rem;
                    display:block;
                    margin:0 auto;
                }
                .name{
                    display:block;
                    text-align:center;
                    line-height:2rem;
                    color:#444444;
                    font-size:1.3rem;
                }
                .item-p{
                    width:100%;
                    line-height:1.8rem;
                    margin-top:1rem;
                    font-size:1.1rem;
                    color:#666666;

                }
            }

            .item:last-child{
                margin-right:0;
            }
        }
        .top-box{
            width:100%;
            .man-box{
                width:calc(50% - 0.5rem);
                height:23rem;
                float:left;
                margin-right:1rem;
                box-sizing:border-box;
                padding:1rem 2.5rem;
                border:1px solid #eaeaea;
                .p-text{
                    height:2rem;
                    line-height:2rem;
                    width:100%;
                    text-align:left;
                    box-sizing:border-box;
                    padding-left:3rem;
                    font-size:1rem;
                    color:#555555;
                }
                .head-box{
                    width:100%;
                    margin-bottom:1rem;
                    .head{
                        width:13rem;
                        height:13rem;
                        display:block;
                        border-radius:50%;
                        float:left;
                    }
                    .right-box{
                        float:left;
                        width:calc(100% - 18rem);
                        margin-left:2rem;
                        .text{
                            width:100%;
                            display:block;
                            height:2rem;
                            line-height:2rem;
                            margin-top:1rem;
                            font-size:0.9rem;
                            color:#555555;
                        }
                        .bu{
                            width:100%;
                            display:block;
                            height:2rem;
                            line-height:2rem;
                            font-size:0.9rem;
                            color:#555555;
                        }

                        .jia{
                            width:100%;
                            display:block;
                            height:2rem;
                            margin-top:1rem;
                            line-height:2rem;
                            font-size:0.9rem;
                            color:#555555;
                        }
                        .login{
                            width:100%;
                            display:block;
                            height:2rem;
                            line-height:2rem;
                            font-size:0.9rem;
                            color:#555555;
                        }
                        .number{
                            width:100%;
                            display:block;
                            height:2rem;
                            line-height:2rem;
                            font-size:0.9rem;
                            color:#555555;
                        }
                    }
                }
            }
            .data-box{
                width:calc(50% - 0.5rem);
                float:right;
                padding:15px;
                border:1px solid #eaeaea;
                box-sizing:border-box;
                padding:1rem 3rem;
                height:23rem;
                .get-box{
                    width:100%;
                    margin-top:2rem;
                    .get-title{
                        display:block;
                        font-size:0.9rem;
                        color:#555555;
                        line-height:2rem;
                    }
                    .get-content{
                        display:block;
                        font-size:0.9rem;
                        color:#555555;
                        line-height:2rem;
                    }
                }
                .top{
                    width:100%;
                    .grade-box{
                        width:14rem;
                        float:left;
                        .span-d{
                            display:block;
                            line-height:2rem;
                            font-size:0.9rem;
                            color:#444444;
                        }
                        .deng{
                            display:block;
                            line-height:2rem;
                            font-size:1.1rem;
                            color:#ff9800;
                        }
                    }
                }
            }
        }
    }
    

</style>
